<template>
	<view class="content">
		<view class="uni-margin-wrap">
			
			
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item>
							<view class="swiper-item ">
								<img src="/static/1.jpg" alt="">
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<img src="/static/2.jpeg" alt="">
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<img src="/static/3.png" alt="">
							</view>
						</swiper-item>
					</swiper>
				</view>
		
		
		<view class="">
			<view class="tit">
				修狗
			</view>
			<view class="dog">
				<myNav class="mynav" v-for=" item, index in dog_li" :key="index" :typeData="item">
				</myNav>
			</view>
			<view class="tit">
				猫猫
			</view>
			<view class="cat">
				
				<!-- <view class="cat_list" v-for=" item, index in cat_li" :key="index"> -->
					<myNav class="mynav" v-for=" item, index in cat_li" :key="index" :typeData="item">
					</myNav>
				<!-- </view> 03a2f6-->
				
			</view>
			
		</view>
				
				
	</view>
</template>

<script>
	import {request} from"@/api/request.js"
import { config } from "process"
	export default {
		data() {
		        return {
		            background: ['color1', 'color2', 'color3'],
		            indicatorDots: true,
		            autoplay: true,
		            interval: 2000,
		            duration: 500,
					
					cat_li: [],
					dog_li: [],
		        }
		    },
			onLoad() {
				// console.log("-----", basicConfig)
				
				var res = request({
					url: '/PetCls',
					method:'GET',
					data:{}
				}).then(res =>{
					// console.log(res)
					if (res.code == 1){
						// console.log(res)
						this.cat_li = res.cat
						this.dog_li = res.dog
					}
				})
				
				
				
				
				
			},
		    methods: {
		        changeIndicatorDots(e) {
		            this.indicatorDots = !this.indicatorDots
		        },
		        changeAutoplay(e) {
		            this.autoplay = !this.autoplay
		        },
		        intervalChange(e) {
		            this.interval = e.target.value
		        },
		        durationChange(e) {
		            this.duration = e.target.value
		        },
				
		    }
	}
</script>

<style  lang="scss">
	.uni-margin-wrap {
			width: 690rpx;
			width: 100%;
		}
		.swiper {
			height: 500rpx;
		}
		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
		}
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}
		.info {
			position: absolute;
			right: 20rpx;
		}
		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
		
	.cat{
		// border: 1rpx solid red;
		margin-top: 10rpx;
		padding: 0rpx 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		// justify-content: center;
		// justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
		
		
		
	}
	.cat::after {
	    content: "";
	    flex: auto;
	}
	.mynav {
	    margin-left: 10rpx;

	    width: -webkit-calc((100% - 10rpx*5)/ 5);
	    width: calc((100% - 10rpx*5)/ 5);
	}
	.dog{
		margin-top: 10rpx;
		// border: 1rpx solid red;
		padding: 0rpx 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		// justify-content: center;
		// justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
	}
	.dog::after {
	    content: "";
	    flex: auto;
	}
	.tit{
		font-size: 30rpx;
		color: gray;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}
</style>
